// import { Button } from "antd";
// import { StarFilled } from "@ant-design/icons";
// import { SvgIcon } from "./components/SvgIcon";
// import { useSettingStore } from "./store";
import { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// import router from "./router";
import { App as AppAntd, ConfigProvider, theme } from "antd";

import Login from "@/views/login";

import { toggleTheme } from "./utils/theme";
import { Layout } from "./layout";
import { useSettingStore } from "./store";

import "uno.css";
import "./styles/index.scss";
import "antd/dist/reset.css";

function App() {
  const { isDark, themeColor } = useSettingStore();

  useEffect(() => {
    document.documentElement.style.setProperty("--primary-color", themeColor);
  }, [themeColor]);

  useEffect(() => {
    toggleTheme(isDark);
  }, [isDark]);
  return (
    // <div>
    //   <Button type="primary">按钮测试</Button>
    //   <br />
    //   <StarFilled />
    //   <div className="test">测试盒子</div>
    //   --------------------------------------
    //   <br />
    //   <SvgIcon iconClass="message" />
    //   <div className="text-blue">UnoCss测试</div>
    //   <div>{num}</div>
    //   <button onClick={() => updateNum(num + 1)}>+1</button>
    // </div>
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        cssVar: true,
        token: {
          // Seed Token，影响范围大
          colorPrimary: themeColor,
        },
      }}
    >
      <AppAntd>
        <BrowserRouter>
          <Routes>
            {/* 使用Layout的其他路由 */}
            <Route path="/*" element={<Layout />}></Route>
            {/* 登录页面 */}
            <Route path="/login" element={<Login />} />
          </Routes>
        </BrowserRouter>
      </AppAntd>
    </ConfigProvider>
    // <RouterProvider router={router} />
  );
}
export default App;
